<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电影售票</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="sgin.js"></script>
    <script src="js/top.js"></script>
    <!--    https://www.yidepiao.com/ -->
</head>
<body>
<div id="app">
    <el-container>
<!--        <el-header class="title">-->
<!--            <div class="c900 flex">-->
<!--                <el-link :underline="false" href="index.html"><h1>电影售票平台</h1></el-link>-->
<!--                <nav>-->
<!--                    <el-link href="index.html" class="center" :underline="false" style="background-color: #99f7">首页</el-link>-->
<!--                    <el-link href="hots.html" class="center" :underline="false">热映电影</el-link>-->
<!--                    <el-link class="center" :underline="false">电影院</el-link>-->
<!--                    <el-link class="center" :underline="false">优惠活动</el-link>-->
<!--                </nav>-->
<!--                <el-input style="width: auto" placeholder="请输入电影,影院,活动">-->
<!--                    <el-button slot="append" icon="el-icon-search"></el-button>-->
<!--                </el-input>-->
<!--                <div class="flex">-->
<!--                    <sgin ref="a" style="display: flex;gap: 10px">-->
<!--                        &lt;!&ndash;                        <template #logined="props">&ndash;&gt;-->
<!--                        <template #logined>-->
<!--                            <el-avatar :src="$refs.a != null?$refs.a.myinfo.head:''"></el-avatar>-->
<!--                            <el-link href="sgin/logout">退出</el-link>-->
<!--                        </template>-->
<!--                        <template #nologin>-->
<!--                            <el-link href="register.html">注册</el-link>-->
<!--                            <el-button type="text"@click="$refs.a.showForget=true">忘记密码</el-button>-->
<!--                            <el-popover-->
<!--                                    placement="top-start"-->
<!--                                    title="打开手机端页面"-->
<!--                                    width="200"-->
<!--                                    trigger="hover">-->
<!--                                <P><img src="/qrcode/mobile"></P>-->
<!--                                <P>-->
<!--                                    <h3>扫描登录</h3>-->
<!--                                    <img id="clq" src="/qrcode/createLoginQrcode">-->
<!--                                    <button onclick="clq.src ='/qrcode/createLoginQrcode?'+new Date().getTime()">重新获取二维码</button>-->
<!--                                </P>-->

<!--                                <el-link slot="reference" href="login.html">登录</el-link>-->
<!--                            </el-popover>-->

<!--                        </template>-->
<!--                    </sgin>-->
<!--                </div>-->
<!--            </div>-->
<!--        </el-header>-->
        <top></top>
        <el-main>
            <div class="c900">
                <el-carousel height="300px">
                    <el-carousel-item>
                        <a href="index.html"><img src="https://img1.baidu.com/it/u=2055209344,947970759&fm=253&fmt=auto&app=120&f=JPEG?w=899&h=500"></a>
                    </el-carousel-item>
                    <el-carousel-item>
                        <a href="index.html"><img src="https://img1.baidu.com/it/u=90645309,4209680604&fm=253&fmt=auto&app=120&f=JPEG?w=1089&h=500"></a>
                    </el-carousel-item>
                    <el-carousel-item>
                        <a href="index.html"><img src="https://img1.baidu.com/it/u=1116910716,4058666902&fm=253&fmt=auto&app=120&f=JPEG?w=1867&h=800"></a>
                    </el-carousel-item>
                    <el-carousel-item>
                        <a href="index.html"><img src="https://img2.baidu.com/it/u=2595454891,2570080057&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500"></a>
                    </el-carousel-item>
                </el-carousel>
                <el-row :gutter="10">
                    <el-col :span="17">
                        <el-card>
                            <el-row :gutter="20" style="margin-bottom: 20px">
                                <el-col v-for="(movie, index) in movies.records" v-if="index <= 3" :span="6" class="hsc">
                                    <a :href="`detail.html?id=${movie.id}`">
                                        <img :src="movie.img" @error="handleImageError($event, movie.id)">
                                        <div class="price">
                                            <span>30元 &nbsp;<small>起</small></span>
                                            <el-button type="primary" size="mini">订购</el-button>
                                        </div>
                                    </a>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20" style="margin-bottom: 20px">
                                <el-col v-for="(movie, index) in movies.records" v-if="index > 3" :span="6" class="hsc">
                                    <a :href="`detail.html?id=${movie.id}`">
                                        <img :src="movie.img" @error="handleImageError($event, movie.id)">
                                        <div class="price">
                                            <span>30元 &nbsp;<small>起</small></span>
                                            <el-button type="primary" size="mini">订购</el-button>
                                        </div>
                                    </a>
                                </el-col>
                            </el-row>
                            <div style="display: flex;justify-content: center;">
                                <el-pagination
                                        layout="prev, pager, next"
                                        :page-size="this.movies.size"
                                        :current-page="this.movies.current"
                                        @current-change="changeCurrent"
                                        :total="this.movies.total">
                                </el-pagination>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="7">
                        <el-card style="height: 100%">
                            <div slot="header" class="clearfix flex">
                                <span>热片排行</span>
                                <el-link href="hots.html" :underline="false">更多影片</el-link>
                            </div>
                            <el-card class="hsc"><el-link href="detail.html" :underline="false">1.{{fivemovie[0]?.name}}</el-link></el-card>
                            <el-card class="hsc"><el-link href="detail.html" :underline="false">2.{{fivemovie[1]?.name}}</el-link></el-card>
                            <el-card class="hsc"><el-link href="detail.html" :underline="false">3.{{fivemovie[2]?.name}}</el-link></el-card>
                            <el-card class="hsc"><el-link href="detail.html" :underline="false">4.{{fivemovie[3]?.name}}</el-link></el-card>
                            <el-card class="hsc"><el-link href="detail.html" :underline="false">5.{{fivemovie[4]?.name}}</el-link></el-card>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <el-footer class="flex title" style="justify-content: center;height: 30px">
            <a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            where:{name:''},
            img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.lCw8yzAgcesQi0fdACCG1wHaLM?w=198&h=299&c=7&r=0&o=5&pid=1.7',
            movies:{current:1,size:8,records:[]},
            fivemovie:{}
        },
        methods:{
            queryMovies(){
                axios.post(`movie/queryMovies?current=${this.movies.current}&size=${this.movies.size}`,this.where).then(res=>{
                    this.movies = res.data;
                });
            },
            changeCurrent(newPage){
                this.movies.current = newPage;
                this.queryMovies();
            },
            handleImageError(event, movieId) {
                // 可以在这里修改movie对象来标记图片加载失败，或者设置备用图片URL
                console.error(`Image failed to load for movie ID: ${movieId}`, event);
                // 假设你有一个备用图片URL
                event.target.src = this.img;
                event.target.style.width = '150.84px';
                event.target.style.height = '188.55px';
            },
            //查询最新放映的5部电影信息
            getFiveMovie(){
                axios.get("movie/getFiveMovie").then(res=>{
                    this.fivemovie = res.data.data;
                });
            }
        },
        created(){
            this.queryMovies();
            this.getFiveMovie();
        }
    })
</script>
<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    .el-main{
        padding: 10px 0px;
        overflow-x: hidden;
        background-image: url("https://img2.baidu.com/it/u=2454799735,2381918605&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500");
        background-size: cover;
    }
    .el-card{
        margin-top: 10px;
    }
    html,body,#app,#app>.el-container{
        height: 100%;
    }
    *{
        transition: all .5s;
    }
    a{
        text-decoration: none;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        gap: 10px;
    }
    .flex>*{
        margin: 0px;
        padding: 0px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    img{
        width: 100%;
        object-fit: cover;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .price{
        font-size: .8em;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 50% 50%;
        padding: 5px;
    }
    .price>span{
        display: flex;
        justify-content: start;
        align-items: center;
    }
    small{
        font-size: .4em;
    }
    .el-icon-search{
        color: #666;
    }
</style>

</html>